<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { sendFeedbackAPI } from '@/api/feedback'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const feedbackContent = ref('')

const submitFeedback = async () => {
  const userId = userStore.userInfo.id
  const today = new Date().toISOString().slice(0, 10) // '2025-09-13'
  const feedbackKey = `feedback-${today}-${userId}`

  // 检查今日是否已提交
  if (uni.getStorageSync(feedbackKey)) {
    uni.showToast({
      title: '您今天已提交过反馈',
      icon: 'none',
    })
    return
  }

  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'none',
    })
    return
  }

  try {
    uni.showLoading({ title: '提交中...' })
    await sendFeedbackAPI(userId, '', feedbackContent.value)
    feedbackContent.value = ''
    uni.hideLoading()
    uni.showToast({
      title: '反馈提交成功，感谢您的宝贵意见！',
      icon: 'success',
    })
    // 标记今日已提交
    uni.setStorageSync(feedbackKey, true)
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '反馈失败，请稍后重试',
      icon: 'none',
    })
  }
}

onLoad(() => {
  const userId = userStore.userInfo.id
  const today = new Date().toISOString().slice(0, 10)
  const keys = uni.getStorageInfoSync().keys

  keys.forEach((key) => {
    if (key.startsWith('feedback-') && key.endsWith(`-${userId}`)) {
      const keyDate = key.split('-')[1]
      if (keyDate !== today) {
        uni.removeStorageSync(key)
      }
    }
  })
})
</script>

<template>
  <view class="feedback-container">
    <!-- 页面头部 -->
    <view class="feedback-header">
      <view class="header-content">
        <view class="header-icon">
          <text class="iconfont icon-banshou"></text>
        </view>
        <text class="header-title">服务与反馈</text>
        <text class="header-desc">您的意见是我们前进的动力</text>
      </view>
    </view>

    <!-- 反馈表单 -->
    <view class="feedback-form">
      <text class="section-title">反馈内容</text>
      <view class="form-content">
        <view class="form-item">
          <uni-easyinput
            v-model="feedbackContent"
            type="textarea"
            placeholder="请详细描述您遇到的问题或建议..."
            maxlength="500"
            class="feedback-textarea"
          />
        </view>

        <view class="submit-container">
          <button
            class="submit-btn"
            :disabled="!feedbackContent.trim()"
            @tap="submitFeedback"
          >
            <text class="iconfont icon-fabu"></text>
            <text class="btn-text">提交反馈</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 联系方式（开源版本默认隐藏，避免泄露个人信息） -->
    <!--
    <view class="contact-section">
      <text class="section-title">其他联系方式</text>
      <view class="contact-methods">
        <view class="contact-item">
          <text class="iconfont icon-QQ contact-icon"></text>
          <view class="contact-info">
            <text class="contact-label">QQ</text>
            <text class="contact-value">替换为你自己的 QQ</text>
          </view>
        </view>
        <view class="contact-item">
          <text class="iconfont icon-weixin contact-icon"></text>
          <view class="contact-info">
            <text class="contact-label">微信</text>
            <text class="contact-value">替换为你的微信号</text>
          </view>
        </view>
      </view>
    </view>
    -->

    <!-- 底部感谢 -->
    <view class="feedback-footer">
      <text class="footer-text"
        >🙏 感谢您的宝贵意见，我们会认真对待每一条反馈</text
      >
    </view>
  </view>
</template>

<style scoped lang="scss">
.feedback-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40rpx 32rpx calc(10rpx + env(safe-area-inset-bottom)) 32rpx;
}

/* 页面头部 */
.feedback-header {
  margin-bottom: 48rpx;

  .header-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 40rpx;
    padding: 60rpx 48rpx;
    text-align: center;
    box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
    border: 2rpx solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;

    .header-icon {
      width: 120rpx;
      height: 120rpx;
      background: linear-gradient(45deg, #667eea, #764ba2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 32rpx;
      box-shadow: 0 16rpx 48rpx rgba(102, 126, 234, 0.3);

      .iconfont {
        font-size: 56rpx;
        color: white;
      }
    }

    .header-title {
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
      background: linear-gradient(45deg, #667eea, #764ba2);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: block;
    }

    .header-desc {
      color: #666;
      font-size: 28rpx;
      opacity: 0.8;
      display: block;
    }
  }
}

/* 反馈表单 */
.feedback-form {
  margin-bottom: 48rpx;

  .section-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin: 0 0 32rpx 32rpx;
    opacity: 0.8;
    display: block;
  }

  .form-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 40rpx;
    padding: 48rpx;
    box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
    border: 2rpx solid rgba(255, 255, 255, 0.2);

    .form-item {
      margin-bottom: 32rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .feedback-textarea {
      :deep(.uni-easyinput__content) {
        border: 2rpx solid #e8e8e8;
        border-radius: 24rpx;
        background: rgba(255, 255, 255, 0.9);
        min-height: 240rpx;

        &.is-focused {
          border-color: #667eea;
          box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
        }
      }

      :deep(.uni-easyinput__content-textarea) {
        padding: 32rpx;
        font-size: 32rpx;
        line-height: 1.5;
        color: #333;

        &::placeholder {
          color: #999;
          font-size: 30rpx;
        }
      }
    }

    .submit-container {
      margin-top: 48rpx;
    }

    .submit-btn {
      width: 100%;
      height: 96rpx;
      background: linear-gradient(45deg, #667eea, #764ba2);
      border: none;
      border-radius: 24rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);

      &:active:not([disabled]) {
        transform: translateY(4rpx);
        box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
      }

      &[disabled] {
        opacity: 0.5;
        transform: none;
        box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
      }

      .iconfont {
        font-size: 32rpx;
      }

      .btn-text {
        font-size: 32rpx;
        font-weight: 600;
      }
    }
  }
}

/* 联系方式 */
.contact-section {
  margin-bottom: 48rpx;

  .section-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin: 0 0 32rpx 32rpx;
    opacity: 0.8;
    display: block;
  }

  .contact-methods {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 40rpx;
    padding: 48rpx;
    box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
    border: 2rpx solid rgba(255, 255, 255, 0.2);

    .contact-item {
      display: flex;
      align-items: center;
      gap: 32rpx;
      padding: 32rpx 0;
      border-bottom: 2rpx solid rgba(102, 126, 234, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .contact-icon {
        width: 80rpx;
        height: 80rpx;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #667eea;
        font-size: 50rpx;
        flex-shrink: 0;
      }

      .contact-info {
        flex: 1;

        .contact-label {
          display: block;
          font-size: 28rpx;
          color: #999;
          margin-bottom: 8rpx;
        }

        .contact-value {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
          display: block;
        }
      }
    }
  }
}

/* 底部感谢 */
.feedback-footer {
  text-align: center;
  padding: 40rpx;

  .footer-text {
    color: #666;
    font-size: 28rpx;
    opacity: 0.8;
    display: block;
  }
}
</style>
